﻿<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

		<title>个人资料</title>

		<link href="../AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
		<link href="../AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">

		<link href="../css/personal.css" rel="stylesheet" type="text/css">
		<link href="../css/infstyle.css" rel="stylesheet" type="text/css">
		<script src="../AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
		<script src="../AmazeUI-2.4.2/assets/js/amazeui.js"></script>

		<link rel="stylesheet" href="../css/laydate.css" />
		<script src="../js/jquery.min.js"></script>
		<script src="../js/laydate.js"></script>
		<script src="../HT/assets/layer/layer.js" type="text/javascript"></script>
		<style type="text/css">
			.select-date {
				font-family: "sta cartman"
			}
		</style>
	</head>
	<body>
		<!--头 -->
		<header>
			<article>
				<div class="mt-logo">
					<!--顶部导航条 -->
					<div class="am-container header">
						<ul class="message-l">
							<div class="topMessage">
								<div class="menu-hd">
									<a href="#" target="_top" class="h">亲，请登录</a>
									<a href="#" target="_top">免费注册</a>
								</div>
							</div>
						</ul>
						<ul class="message-r">
							<div class="topMessage home">
								<div class="menu-hd">
									<a href="#" target="_top" class="h">商城首页</a>
								</div>
							</div>
							<div class="topMessage my-shangcheng">
								<div class="menu-hd MyShangcheng">
									<a href="#" target="_top"><i class="am-icon-user am-icon-fw"></i>个人中心</a>
								</div>
							</div>
							<div class="topMessage mini-cart">
								<div class="menu-hd">
									<a id="mc-menu-hd" href="#" target="_top"><i class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum" class="h">0</strong></a>
								</div>
							</div>
							<div class="topMessage favorite">
								<div class="menu-hd">
									<a href="#" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a>
								</div>
						</ul>
						</div>

						<!--悬浮搜索框-->

						<div class="nav white">
							<div class="logoBig">
								<li><img src="../images/logobig.png" /></li>
							</div>

							<div class="search-bar pr">
								<a name="index_none_header_sysc" href="#"></a>
								<form>
									<input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off"> <input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
								</form>
							</div>
						</div>

						<div class="clear"></div>
					</div>
				</div>
			</article>
		</header>
		<div class="nav-table">
			<div class="long-title">
				<span class="all-goods">全部分类</span>
			</div>
			<div class="nav-cont">
				<ul>
					<li class="index">
						<a href="#">首页</a>
					</li>
					<li class="qc">
						<a href="#">闪购</a>
					</li>
					<li class="qc">
						<a href="#">限时抢</a>
					</li>
					<li class="qc">
						<a href="#">团购</a>
					</li>
					<li class="qc last">
						<a href="#">大包装</a>
					</li>
				</ul>
				<div class="nav-extra">
					<i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利 <i class="am-icon-angle-right" style="padding-left: 10px;"></i>
				</div>
			</div>
		</div>
		<b class="line"></b>
		<div class="center">
			<div class="col-main">
				<div class="main-wrap">

					<div class="user-info">
						<!--标题 -->
						<div class="am-cf am-padding">
							<div class="am-fl am-cf">
								<strong class="am-text-danger am-text-lg">个人资料</strong> / <small>Personal&nbsp;information</small>
							</div>
						</div>
						<hr />

						<!--头像 -->
						<div class="user-infoPic">

							<div class="filePic">
								<input type="file" class="inputPic" allowexts="gif,jpeg,jpg,png,bmp" accept="image/*"> <img class="am-circle am-img-thumbnail" src="../images/getAvatar.do.jpg" alt="" />
							</div>

							<p class="am-form-help">头像</p>

							<div class="info-m">
								<div>
									<b>用户名：<i id="username">小叮当</i></b>
								</div>
								<div class="vip">
									<span></span>
									<a href="#">会员专享</a>
								</div>
							</div>
						</div>

						<!--个人信息 -->
						<div class="info-main">
							<form class="am-form am-form-horizontal">

								<div class="am-form-group">
									<label id="user-id" class="am-form-label">昵称</label>
									<div class="am-form-content">
										<input type="text" id="user-name1" placeholder="nickname">
										<small>昵称长度不能超过40个汉字</small>
									</div>
								</div>

<!--								<div class="am-form-group">-->
<!--									<label id="user-name" class="am-form-label">姓名</label>-->
<!--									<div class="am-form-content">-->
<!--										<input type="text" id="user-name2" placeholder="name">-->
<!--									</div>-->
<!--								</div>-->

								<div class="am-form-group">
									<label class="am-form-label">性别</label>
									<div class="am-form-content sex">
										<label class="am-radio-inline"> <input
										id="nan" type="radio"
										name="radio10" value="1" data-am-ucheck> 男
									</label> <label class="am-radio-inline"> <input
										id="nv"	type="radio"
										name="radio10" value="0" data-am-ucheck> 女
									</label> <label class="am-radio-inline"> <input
										id="mi"	type="radio"
										name="radio10" value="2" data-am-ucheck> 保密
									</label>
									</div>
								</div>

								<div class="am-form-group">
									<label id="user-birth" class="am-form-label">生日</label>
									<div class="laydate-box" style="position: absolute; top: 380px; left: -20px;">
										<input type="text" id="laydateInput" placeholder="xxxx年xx月xx日" />
										<img src="../images/calendar.png" alt="" class="icon data-icon"/>
										<div class="select-date">
											<div class="select-date-header">
												<ul class="heade-ul">
													<li class="header-item header-item-one">
														<select name="" id="yearList"></select>
													</li>
													<li class="header-item header-item-two" onselectstart="return false">
														<select name="" id="monthList"></select>
													</li>
													<li class="header-item header-item-three" onselectstart="return false">
														<span class="reback">回到今天</span>
													</li>
												</ul>
											</div>
											<div class="select-date-body">
												<ul class="week-list">
													<li>日</li>
													<li>一</li>
													<li>二</li>
													<li>三</li>
													<li>四</li>
													<li>五</li>
													<li>六</li>
												</ul>
												<ul class="day-tabel"></ul>
											</div>
										</div>
									</div>
									<!--<div class="am-form-content birth">
									<div class="birth-select">
										<select data-am-selected>
											<option value="a">2015</option>
											<option value="b">1987</option>
										</select> <em>年</em>
									</div>
									<div class="birth-select2">
										<select data-am-selected>
											<option value="a">12</option>
											<option value="b">8</option>
										</select> <em>月</em>
									</div>
									<div class="birth-select2">
										<select data-am-selected>
											<option value="a">21</option>
											<option value="b">23</option>
										</select> <em>日</em>
									</div>
								</div>-->

								</div>
								<div class="am-form-group">
									<label id="userphone" class="am-form-label">电话</label>
									<div class="am-form-content">
										<img src="../images/calendar.png" alt="" class="p_phone_toubao" style="position: absolute ;right: 220px"/>
										<input id="user-phone" placeholder="telephonenumber" type="tel">
									</div>
								</div>
								<div class="am-form-group">
									<label id="userEmail" class="am-form-label">电子邮件</label>
									<div class="am-form-content">
										<img src="../images/calendar.png" alt="" class="p_phone_toubao" style="position: absolute ;right: 220px"/>
										<input id="user-email" placeholder="Email" type="email">
									</div>
								</div>
								<div class="am-form-group address">
									<label id="user-address" class="am-form-label">收货地址</label>
									<div class="am-form-content address">
										<a href="address.html">
											<p class="new-mu_l2cw">
												<span class="province">湖北</span>省 <span class="city">武汉</span>市
												<span class="dist">洪山</span>区 <span class="street">雄楚大道666号(中南财经政法大学)</span>
												<span class="am-icon-angle-right"></span>
											</p>
										</a>
									</div>
								</div>
								<div class="am-form-group safety">
									<label id="user-safety" class="am-form-label">账号安全</label>
									<div class="am-form-content safety">
										<a href="safety.html"> <span class="am-icon-angle-right"></span>
										</a>
									</div>
								</div>
								<div class="info-btn">
									<div class="am-btn am-btn-danger" onclick="request()">保存修改</div>
								</div>
							</form>
						</div>
					</div>

				</div>
				<!--底部-->
				<div class="footer">
					<div class="footer-hd">
						<p>
							<a href="#">卓鼎教育</a> <b>|</b>
							<a href="#">商城首页</a> <b>|</b>
							<a href="#">支付宝</a> <b>|</b>
							<a href="#">物流</a>
						</p>
					</div>
					<div class="footer-bd">
						<p style="text-align: center;">
							<a href="#">合作伙伴</a>
							<a href="#">联系我们</a>
							<a href="#">网站地图</a> <em style="text-align: center;">© 2015-2025 zking 版权所有</em>
						</p>
					</div>
				</div>
			</div>

			<aside class="menu">
				<ul>
					<li class="person active">
						<a href="index.html"><i class="am-icon-user"></i>个人中心</a>
					</li>
					<li class="person">
						<p>
							<i class="am-icon-newspaper-o"></i>个人资料
						</p>
						<ul>
							<li>
								<a href="information.html">个人信息</a>
							</li>
							<li>
								<a href="safety.html">安全设置</a>
							</li>
							<li>
								<a href="address.html">地址管理</a>
							</li>
							<li>
								<a href="cardlist.html">快捷支付</a>
							</li>
						</ul>
					</li>
					<li class="person">
						<p>
							<i class="am-icon-balance-scale"></i>我的交易
						</p>
						<ul>
							<li>
								<a href="order.html">订单管理</a>
							</li>
							<li>
								<a href="change.html">退款售后</a>
							</li>
							<li>
								<a href="comment.html">评价商品</a>
							</li>
						</ul>
					</li>
					<li class="person">
						<p>
							<i class="am-icon-dollar"></i>我的资产
						</p>
						<ul>
							<li>
								<a href="points.html">我的积分</a>
							</li>
							<li>
								<a href="coupon.html">优惠券 </a>
							</li>
							<li>
								<a href="bonus.html">红包</a>
							</li>
							<li>
								<a href="walletlist.html">账户余额</a>
							</li>
							<li>
								<a href="bill.html">账单明细</a>
							</li>
						</ul>
					</li>

					<li class="person">
						<p>
							<i class="am-icon-tags"></i>我的收藏
						</p>
						<ul>
							<li>
								<a href="collection.html">收藏</a>
							</li>
							<li>
								<a href="foot.html">足迹</a>
							</li>
						</ul>
					</li>

					<li class="person">
						<p>
							<i class="am-icon-qq"></i>在线客服
						</p>
						<ul>
							<li>
								<a href="consultation.html">商品咨询</a>
							</li>
							<li>
								<a href="suggest.html">意见反馈</a>
							</li>

							<li>
								<a href="news.html">我的消息</a>
							</li>
						</ul>
					</li>
				</ul>
			</aside>
		</div>
	</body>
<script>
$.ajax({
	url:"http://localhost:8080/SnacksShop/user.do?type=information",
	type:"post",
	crossDomain: true,
	xhrFields: {
		withCredentials: true
	},
	data:{

	},
	success:function (data){
		var obj = JSON.parse(data);
		console.log(obj);
		console.log(new Date(obj.requestAPI.object.userBirthday.time).toISOString());
		$("#username").text(obj.requestAPI.object.userName);
		$("#user-name1").val(obj.requestAPI.object.userName);
		var a=obj.requestAPI.object.userSex;
		if (a==0){
			$("#nv").attr("checked","checked");
		}else if (a==1){
			$("#nan").attr("checked","checked");
		}else if (a==2){
			$("#mi").attr("checked","checked");
		}
		$("#laydateInput").val(new Date(obj.requestAPI.object.userBirthday.time).toLocaleDateString().substring(0,4)
				+"-"+new Date(obj.requestAPI.object.userBirthday.time).toLocaleDateString().substring(5,7)
				+"-"+new Date(obj.requestAPI.object.userBirthday.time).toLocaleDateString().substring(8,10));
		$("#user-phone").val(obj.requestAPI.object.userPhone);
		$("#user-email").val(obj.requestAPI.object.userMail);
	},
	error:function (data){
	}
})
	function request() {
	var userName=$("#user-name1").val();
	var userSex=$("input[name='radio10']:checked").val();
	var userBri=$("#laydateInput").val();
	var userPhone=$("#user-phone").val();
	var userEmail=$("#user-email").val();
		// var phoneReg = /^[1][3|5|8][0-9]{9}$/;//定义手机的正则表达式
		// if (!phoneReg.test(userPhone)) {
		// 	alert("您输入的手机号格式不正确");
		// 	return false;
		// }
		//手机号验证
		function phone_verification() {
			var phone_reg = /^1[3|4|5|7|8]\d{9}$/;  //正则表达式

			if(userPhone == "" || (!phone_reg.test(userPhone))) {
				$('.p_phone_toubao').css('display', 'block');     //错误信息提示
				return false;
			} else {
				$('.p_phone_toubao').css('display', 'none');
				return true;
			}
		};

//手机号 失去焦点事件
		$('.box_phone_toubao input').blur(function() {
			phone_verification();
		})//
//手机号获取焦点
		$('.box_phone_toubao input').focus(function(){
			$('.p_phone_toubao').css('display', 'none');
		})

		var emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/; //定义邮箱的正则表达式
		if (!emailReg.test(userEmail)) {
			alert("您输入的Email地址格式不正确!");
			return false;
		}
		$.ajax({
			url:"http://localhost:8080/SnacksShop/user.do?type=information",
			type:"post",
			crossDomain: true,
			xhrFields: {
				withCredentials: true
			},
			data:{
				userName:userName,
				userSex:userSex,
				userBri:userBri,
				userPhone:userPhone,
				userEmail:userEmail
			},
			success:function (data){
				layer.msg("修改成功",{icon: 1, time: 1500});
			},

			error:function (data){
				layer.msg('请检查你的网络!', {icon: 1, time: 1500});
			}
		})
	}

</script>
</html>